<template>
  <div>
    <!-- {{}} v-html  -->
    <p>{{ msg }}</p>
    <p v-text="msg"></p>
    <p v-html="msg"></p>
    <hr />
    <p>{{ msg1 }}</p>
    <p v-text="msg1"></p>
    <p v-html="msg1"></p>
  </div>
</template>

<script>
// xss攻击 跨站脚本攻击
// innerText innerHTML
// vue内部为了避免xss攻击，插值表达式和v-text默认看到带标签的字符串，就会做编码处理，把<>转换成&lt,&gt;
// 但是一般情况下data中数据将来是来自于本公司的ajax数据，本公司的内部数据我们认为肯定是安全的，没问题的，所以
// 如果你确定想渲染，可以，用v-html

// 上午讲过的
// v-model (number,trim,lazy)
// v-text
// v-html
// v-if
// v-show
// v-else
// v-else-if
export default {
  data() {
    return {
      msg: "hello world",
      msg1: '<h1 style="color:red;">hello world</h1>',
    };
  },
};
</script>

<style scoped></style>
